<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业人事管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #606266;
        }
        .app-container {
            min-height: 100vh;
        }
        .header {
            background-color: #409EFF;
            color: white;
            padding: 0 20px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .main-content {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .card {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            padding: 20px;
        }
        .search-form {
            margin-bottom: 20px;
        }
        .table-container {
            margin-top: 20px;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
        .operation-buttons {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
        }
        .tab-container {
            margin-top: 20px;
        }
        .dept-info {
            padding: 15px;
            background-color: #ecf5ff;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .employee-list {
            margin-top: 20px;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        .gender-male {
            color: #409EFF;
        }
        .gender-female {
            color: #F56C6C;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <!-- 顶部导航 -->
    <div class="header">
        <h2>企业人事管理系统</h2>
        <div>
            <el-button type="text" icon="el-icon-user" style="color: white;">管理员</el-button>
        </div>
    </div>

    <div class="main-content">
        <!-- 主内容区 -->
        <el-tabs v-model="activeTab" type="border-card">
            <!-- 部门管理 -->
            <el-tab-pane label="部门管理" name="dept">
                <div class="operation-buttons">
                    <el-button type="primary" icon="el-icon-plus" @click="showAddDeptDialog">新增部门</el-button>
                </div>

                <el-table :data="deptList" stripe class="table-container">
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="name" label="部门名称"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180">
                        <template slot-scope="scope">
                            {{ formatDateTime(scope.row.createTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" width="180">
                        <template slot-scope="scope">
                            {{ formatDateTime(scope.row.updateTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="250">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="showEditDeptDialog(scope.row)">编辑</el-button>
                            <el-button size="mini" type="primary" @click="viewDeptEmployees(scope.row)">查看员工</el-button>
                            <el-button size="mini" type="danger" @click="deleteDept(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <!-- 员工管理 -->
            <el-tab-pane label="员工管理" name="emp">
                <div class="card">
                    <el-form :model="empQuery" label-width="100px" class="search-form" inline>
                        <el-form-item label="员工姓名">
                            <el-input v-model="empQuery.name" placeholder="请输入姓名" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="empQuery.gender" placeholder="请选择性别" clearable>
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="入职日期">
                            <el-date-picker
                                    v-model="empQuery.begin"
                                    type="date"
                                    placeholder="开始日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                            -
                            <el-date-picker
                                    v-model="empQuery.end"
                                    type="date"
                                    placeholder="结束日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="loadEmpData">查询</el-button>
                            <el-button @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="operation-buttons">
                    <el-button type="primary" icon="el-icon-plus" @click="showAddEmpDialog">新增员工</el-button>
                </div>

                <el-table :data="empList" stripe class="table-container">
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                    <el-table-column prop="username" label="用户名" width="120"></el-table-column>
                    <el-table-column prop="gender" label="性别" width="80">
                        <template slot-scope="scope">
                                <span :class="scope.row.gender === 1 ? 'gender-male' : 'gender-female'">
                                    {{ scope.row.gender === 1 ? '男' : '女' }}
                                </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="image" label="头像" width="80">
                        <template slot-scope="scope">
                            <img :src="scope.row.image || 'default-avatar.png'" class="avatar" alt="头像">
                        </template>
                    </el-table-column>
                    <el-table-column prop="job" label="职位" width="120">
                        <template slot-scope="scope">
                            {{ getJobName(scope.row.job) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="entrydate" label="入职日期" width="120"></el-table-column>
                    <el-table-column prop="deptId" label="部门" width="120">
                        <template slot-scope="scope">
                            {{ getDeptName(scope.row.deptId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180">
                        <template slot-scope="scope">
                            {{ formatDateTime(scope.row.createTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="showEditEmpDialog(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteEmp(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="empQuery.pageNum"
                            :page-sizes="[5, 10, 20, 50]"
                            :page-size="empQuery.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>

    <!-- 部门对话框 -->
    <el-dialog :title="deptDialogTitle" :visible.sync="deptDialogVisible" width="500px">
        <el-form :model="deptForm" label-width="80px">
            <el-form-item label="部门名称">
                <el-input v-model="deptForm.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="deptDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDept">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 员工对话框 -->
    <el-dialog :title="empDialogTitle" :visible.sync="empDialogVisible" width="600px">
        <el-form :model="empForm" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="empForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" v-if="isAddEmp">
                <el-input v-model="empForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="empForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="empForm.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="empForm.image" :src="empForm.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="职位">
                <el-select v-model="empForm.job" placeholder="请选择职位">
                    <el-option label="经理" :value="1"></el-option>
                    <el-option label="主管" :value="2"></el-option>
                    <el-option label="员工" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="入职日期">
                <el-date-picker
                        v-model="empForm.entrydate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="empForm.deptId" placeholder="请选择部门">
                    <el-option v-for="dept in deptList" :key="dept.id" :label="dept.name" :value="dept.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="empDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEmp">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 部门员工详情对话框 -->
    <el-dialog title="部门员工详情" :visible.sync="deptEmpDialogVisible" width="800px">
        <div class="dept-info" v-if="currentDeptEmp">
            <h3>{{ currentDeptEmp.name }} 部门</h3>
            <p>创建时间: {{ formatDateTime(currentDeptEmp.createTime) }}</p>
            <p>更新时间: {{ formatDateTime(currentDeptEmp.updateTime) }}</p>
        </div>

        <div class="employee-list">
            <h4>员工列表</h4>
            <el-table :data="currentDeptEmp ? currentDeptEmp.emps : []" stripe>
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="gender" label="性别" width="80">
                    <template slot-scope="scope">
                            <span :class="scope.row.gender === 1 ? 'gender-male' : 'gender-female'">
                                {{ scope.row.gender === 1 ? '男' : '女' }}
                            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="job" label="职位" width="120">
                    <template slot-scope="scope">
                        {{ getJobName(scope.row.job) }}
                    </template>
                </el-table-column>
                <el-table-column prop="entrydate" label="入职日期" width="120"></el-table-column>
            </el-table>
        </div>
    </el-dialog>
</div>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeTab: 'dept',
                // 部门相关数据
                deptList: [],
                deptDialogVisible: false,
                deptDialogTitle: '新增部门',
                deptForm: {
                    id: null,
                    name: ''
                },
                currentDeptEmp: null,
                deptEmpDialogVisible: false,

                // 员工相关数据
                empList: [],
                totalCount: 0,
                empQuery: {
                    name: '',
                    gender: null,
                    begin: '',
                    end: '',
                    pageNum: 1,
                    pageSize: 10,
                    startIndex: 0
                },
                empDialogVisible: false,
                empDialogTitle: '新增员工',
                isAddEmp: true,
                empForm: {
                    id: null,
                    username: '',
                    password: '',
                    name: '',
                    gender: 1,
                    image: '',
                    job: 3,
                    entrydate: '',
                    deptId: null
                }
            }
        },
        mounted() {
            this.loadDeptData();
            this.loadEmpData();
        },
        methods: {
            // 部门相关方法
            loadDeptData() {
                axios.get('/depts/selectAll')
                    .then(response => {
                        this.deptList = response.data.data;
                    })
                    .catch(error => {
                        console.error('加载部门数据失败:', error);
                        this.$message.error('加载部门数据失败');
                    });
            },
            showAddDeptDialog() {
                this.deptForm = { id: null, name: '' };
                this.deptDialogTitle = '新增部门';
                this.deptDialogVisible = true;
            },
            showEditDeptDialog(dept) {
                this.deptForm = { ...dept };
                this.deptDialogTitle = '编辑部门';
                this.deptDialogVisible = true;
            },
            saveDept() {
                if (this.deptForm.id) {
                    // 编辑部门
                    axios.post('/depts/update', null, {
                        params: {
                            id: this.deptForm.id,
                            name: this.deptForm.name
                        }
                    })
                        .then(response => {
                            this.$message.success('部门更新成功');
                            this.deptDialogVisible = false;
                            this.loadDeptData();
                        })
                        .catch(error => {
                            console.error('更新部门失败:', error);
                            this.$message.error('更新部门失败');
                        });
                } else {
                    // 新增部门
                    axios.post('/depts/add', null, {
                        params: {
                            name: this.deptForm.name
                        }
                    })
                        .then(response => {
                            this.$message.success('部门添加成功');
                            this.deptDialogVisible = false;
                            this.loadDeptData();
                        })
                        .catch(error => {
                            console.error('添加部门失败:', error);
                            this.$message.error('添加部门失败');
                        });
                }
            },
            deleteDept(id) {
                this.$confirm('确定要删除这个部门吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/depts/deleteById', {
                        params: { id }
                    })
                        .then(response => {
                            this.$message.success('部门删除成功');
                            this.loadDeptData();
                        })
                        .catch(error => {
                            console.error('删除部门失败:', error);
                            this.$message.error('删除部门失败');
                        });
                }).catch(() => {});
            },
            viewDeptEmployees(dept) {
                axios.get(`/depts/withEmp/${dept.id}`)
                    .then(response => {
                        this.currentDeptEmp = response.data.data;
                        this.deptEmpDialogVisible = true;
                    })
                    .catch(error => {
                        console.error('获取部门员工信息失败:', error);
                        this.$message.error('获取部门员工信息失败');
                    });
            },

            // 员工相关方法
            loadEmpData() {
                axios.get('/emps/findPageByCondition', {
                    params: this.empQuery
                })
                    .then(response => {
                        const pageData = response.data.data;
                        this.empList = pageData.dataList;
                        this.totalCount = pageData.totalCount;
                    })
                    .catch(error => {
                        console.error('加载员工数据失败:', error);
                        this.$message.error('加载员工数据失败');
                    });
            },
            resetQuery() {
                this.empQuery = {
                    name: '',
                    gender: null,
                    begin: '',
                    end: '',
                    pageNum: 1,
                    pageSize: 10,
                    startIndex: 0
                };
                this.loadEmpData();
            },
            handleSizeChange(size) {
                this.empQuery.pageSize = size;
                this.loadEmpData();
            },
            handleCurrentChange(page) {
                this.empQuery.pageNum = page;
                this.loadEmpData();
            },
            showAddEmpDialog() {
                this.empForm = {
                    id: null,
                    username: '',
                    password: '',
                    name: '',
                    gender: 1,
                    image: '',
                    job: 3,
                    entrydate: '',
                    deptId: this.deptList.length > 0 ? this.deptList[0].id : null
                };
                this.empDialogTitle = '新增员工';
                this.isAddEmp = true;
                this.empDialogVisible = true;
            },
            showEditEmpDialog(emp) {
                this.empForm = { ...emp };
                this.empDialogTitle = '编辑员工';
                this.isAddEmp = false;
                this.empDialogVisible = true;
            },
            saveEmp() {
                if (this.empForm.id) {
                    // 编辑员工
                    axios.post('/emps/update', this.empForm)
                        .then(response => {
                            this.$message.success('员工更新成功');
                            this.empDialogVisible = false;
                            this.loadEmpData();
                        })
                        .catch(error => {
                            console.error('更新员工失败:', error);
                            this.$message.error('更新员工失败');
                        });
                } else {
                    // 新增员工
                    axios.post('/emps/insert', this.empForm)
                        .then(response => {
                            this.$message.success('员工添加成功');
                            this.empDialogVisible = false;
                            this.loadEmpData();
                        })
                        .catch(error => {
                            console.error('添加员工失败:', error);
                            this.$message.error('添加员工失败');
                        });
                }
            },
            deleteEmp(id) {
                this.$confirm('确定要删除这个员工吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/emps/deleteById', {
                        params: { id }
                    })
                        .then(response => {
                            this.$message.success('员工删除成功');
                            this.loadEmpData();
                        })
                        .catch(error => {
                            console.error('删除员工失败:', error);
                            this.$message.error('删除员工失败');
                        });
                }).catch(() => {});
            },
            beforeAvatarUpload(file) {
                // 在实际应用中，这里应该上传图片到服务器并获取URL
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }

                // 模拟上传成功
                if ((isJPG || isPNG) && isLt2M) {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => {
                        this.empForm.image = reader.result;
                    };
                }
                return false; // 阻止默认上传行为
            },

            // 工具方法
            formatDateTime(dateTime) {
                if (!dateTime) return '';
                const date = new Date(dateTime);
                return date.toLocaleString();
            },
            getJobName(job) {
                const jobMap = {
                    1: '经理',
                    2: '主管',
                    3: '员工'
                };
                return jobMap[job] || '未知';
            },
            getDeptName(deptId) {
                const dept = this.deptList.find(d => d.id === deptId);
                return dept ? dept.name : '未知部门';
            }
        }
    });
</script>
</body>
</html>